<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>张繁荣</h1>
    <script src="js/echarts.min.js"></script>
    <script src="js/echarts-gl.js"></script>
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {},
        visualMap: {
          show: false,
          dimension: 2,
          min: -1,
          max: 1,
        },
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        grid3D: {},
        series: [
          {
            type: "bar3D",
            name: "1",
            barSize: 15,
            data: [
              [1, 0, 1200 + 1200 + 1800],
              [2, 0, 10000],
              [4, 0, 6000],
            ],
            stack: "stack",
            shading: "lambert",
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            type: "bar3D",
            name: "2",
            barSize: 15,
            data: [
              [4, 0, 12000],
              [5, 0, 60000],
              [3, 0, 12000],
            ],
            // stack: 'stack',
            shading: "lambert",
            emphasis: {
              label: {
                show: true,
              },
            },
          },
        ],
      };

      myChart.setOption(option);
    </script>
  </body>
</html>